/*
Author:kermit
Email:455196886@qq.com
Company:http://dragontrail.com/
Creattime:2017-01-09
*/

//引入基础
@import "reset.less";
//引入动画类库
@import "animate.min.less";
//引入变量
@import "variable.less";
//引入公共
@import "common.less";
//引入项目私有库
@import "private.less";

html,body{
	.fullbox;
	overflow:hidden;
}
@-webkit-keyframes rotate{
	0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
	50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
	100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes rotate{
	0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
	50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
	100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@-webkit-keyframes scale{
	30%{-webkit-transform:scale(0.3);transform:scale(0.3);}
	100%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes scale{
	30%{-webkit-transform:scale(0.3);transform:scale(0.3);}
	100%{-webkit-transform:scale(1);transform:scale(1);}
}

//lazy图片样式
img[lazy=loading]{
/*your style here*/
	width:60*@unit;
	height:60*@unit;
}
img[lazy=error] {
/*your style here*/
}
img[lazy=loaded] {
/*your style here*/
}

//返回顶部按钮
#gotoTop{
	width:90*@unit;
	height:90*@unit;
	position:fixed;
	bottom:110*@unit;
	right:30*@unit;
	z-index:9;
	background-color:transparent;
	padding:0;
	.animation_duration(0.5s);
}

#app{
	.fullbox;
	position:relative;
	.loading{
		position: absolute;
		top:0;
		left:0;
		z-index:9999;
		.fullbox;
		background:#000;
		display:table;
		.loading-icon{
			position:absolute;
			top:50%;
			left:50%;
			width: 60px;
			height: 60px;
			margin-top:-30px;
			margin-left:-30px;
			background:url(../imgs/camera.png) no-repeat center center;
			position: absolute;
			div{
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
				position: absolute;
				top: 0px;
				left: 0px;
				border-radius: 100%;
			}
			div:first-child {
				background: #F6AC19;
				height: 16px;
				width: 16px;
				top: 22px;
				left: 22px;
				-webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
				animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
			}
			div:last-child {
				left: 15px;
				top: 16px;
				position: absolute;
				border: 2px solid #F6AC19;
				width: 25px;
				height: 25px;
				background: transparent;
				border: 2px solid;
				border-color: #F6AC19 transparent #F6AC19 transparent;
				-webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
				animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
				-webkit-animation-duration: 1s;
				animation-duration: 1s;
			}
		}
	}
	.start-page{
		.fullbox;
		position:absolute;
		top:0;
		left:0;
		background:#016ebe url(../imgs/startPageBg.jpg) center center;
		background-size:cover;
		z-index:999;
		.header{
			position:absolute;
			top:0;
			left:0;
			.border-box;
			width:100%;
			padding:50*@unit 40*@unit 0 40*@unit;
			.logo{
				.img-box;
				width:379*@unit;
			}
			.countDown{
				display:block;
				width:54*@unit;
				height:54*@unit;
				text-align:center;
				line-height:54*@unit;
				color:#fff;
				border:1px solid #fff;
				font-size:14px;
				font-weight:normal;
				border-radius:50%;
			}
		}
		.body{
			.fullbox;
			.vertical-center;
			.title{
				.img-box;
				width:100%;
				margin-bottom:56*@unit;
				text-align:center;
				img{
					width:528*@unit;
				}
			}
			.photos{
				width:572*@unit;
				margin:0 auto;
				padding-bottom:180*@unit;
				.img{
					.img-box;
					.animation_duration(0.5s);
					width:102*@unit;
					height:96*@unit;
					margin:4*@unit;
					&.img1,&.img2{
						width:98*@unit;
					}
					&.img6,&.img9{
						width:110*@unit;
						height:88*@unit;
					}
					&.img7,&.img8{
						width:118*@unit;
						height:117*@unit;
					}
					&.img10{
						width:125*@unit;
						width:96*@unit;
					}
					&.img1{.animation_delay(0.1s)}
					&.img2{.animation_delay(0.2s)}
					&.img3{.animation_delay(0.3s)}
					&.img4{.animation_delay(0.4s)}
					&.img5{.animation_delay(0.5s)}
					&.img6{.animation_delay(0.6s)}
					&.img7{.animation_delay(0.7s)}
					&.img8{.animation_delay(0.8s)}
					&.img9{.animation_delay(0.9s)}
					&.img10{.animation_delay(1s)}
				}
				.row2{
					width:522*@unit;
					margin:0 auto; 
				}
				.row3{
					width:132*@unit;
					margin:0 auto; 
				}
			}
		}
		.footer{
			position:absolute;
			bottom:0;
			left:0;
			.border-box;
			width:100%;
			padding:0 86*@unit 72*@unit 86*@unit;
			.animation_delay(1.2s);
			.animation_duration(0.5s);
			.enter-btn{
				width:100%;
				height:68*@unit;
				line-height:68*@unit;
				padding:0;
				border:1px solid #fff;
				color:#fff;
				font-size:14px;
				background-color: transparent;
			}
		}
	}
}

#album{
	.fullbox;
	overflow:auto;
	.photo-loading{
		width:100%;
		padding:20*@unit;
		text-align:center;
		.border-box;
		img{
			width:80*@unit;
			height:80*@unit;
		}
	}
}

.banner{
	width:100%;
	img{
		width:100%;
	}
}

.topBar{
	background-color:#fff;
	.animation_duration(0.5s);
	&.topBarFixed{
		position:fixed;
		top:0;
		left:0;
		width:100%;
	}
	.pageInfo{
		padding:30*@unit 26*@unit;
	}
	.title{
		font-weight:normal;
		font-size:16px;
		color:#333;
		.line{
			padding:0 0.3em;
			color:#bdbdbd;
		}
		.time{
			font-size:14px;
		}
	}
	.totalPages{
		font-size:12px;
		color:#999999;
	}
	.button-group{
		border-top:1px solid #eee;
		position:relative;
	}
	.buttons{
		button{
			padding:0;
			width:50%;
			height:80*@unit;
			color:#666666;
			font-size:12px;
			background-color: transparent;
			line-height:80*@unit;
			border-bottom:1px solid #eee;
			&:first-child{
				border-right:1px solid #eee;
			}
			span{
				padding-right:40*@unit;
				position:relative;
				line-height:30*@unit;
			}
			.icon{
				position: absolute;
				top:0;
				right:0;
				display:inline-block;
				width:28*@unit;
				height:30*@unit;
				background:url(../imgs/icon_down_gray.jpg) no-repeat center center;
				background-size:100% 100%;
			}
			&.filter-btn-active{
				color:#0394d5;
			}
			&.filter-btn-time{
				.icon{
					background-image:url(../imgs/icon_down_gray.jpg)
				}
				&.filter-btn-active{
					.icon{
						background-image:url(../imgs/icon_down_blue.jpg)
					}
				}
			}
			&.filter-btn-time-up{
				.icon{
					background-image:url(../imgs/icon_up_gray.jpg)
				}
				&.filter-btn-active{
					.icon{
						background-image:url(../imgs/icon_up_blue.jpg)
					}
				}
			}
			&.filter-btn-filter{
				.icon{
					background-image:url(../imgs/icon_filter_gray.jpg)
				}
				&.filter-btn-active{
					.icon{
						background-image:url(../imgs/icon_filter_blue.jpg)
					}
				}
			}
		}
	}
	.filters{
		padding:20*@unit 26*@unit;
		background-color:#fff;
		position: absolute;
		top:80*@unit;
		left:0;
		width:100%;
		.border-box;
		.item{
			width:50%;
			color:#666;
			height:72*@unit;
			line-height:72*@unit;
			.border-box;
			padding-left:24*@unit;
			padding-right:24*@unit;
			.icon{
				float:right;
				display:none;
				width:33*@unit;
				height:72*@unit;
				background:url(../imgs/icon_right.jpg) no-repeat center center;
				background-size:33*@unit 21*@unit;
			}
			&.item-active{
				color:#0394d5;
				border-bottom:1px solid #eee;
				.icon{
					display:block;
				}
			}
		}
	}
}

//图片列表
.photos-gallery{
	padding:2*@unit;
	.item-photo{
		.transition(all,0.5s,ease,0s);
		.border-box;
		padding:2*@unit;
		&.col-2{
			width:100%/2;
		}
		&.col-3{
			width:100%/3;
		}
		.photo{
			width:100%;
			height:0;
			//background-image:url(../imgs/loading.gif);
			background-position:center center;
			background-size:cover;
			padding-bottom:100%;
			&[lazy=loading]{
				background-repeat:no-repeat;
				background-position:center center;
				background-size:80*@unit 80*@unit;
			};
			&[lazy=loaded]{
				background-image:url(error.jpg);
			}
			&[lazy=error]{
				background-image:url(error.jpg);
			}
		}
	}
}
//遮盖幻灯片
.photo-cover{
	position:fixed;
	top:0;
	left:0;
	z-index:999;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.8);
	.close-btn{
		width:40*@unit;
		height:40*@unit;
		padding:0;
		position: absolute;
		right:86*@unit;
		top:60*@unit;
		z-index:99;
		text-indent:-999em;
		background:url(../imgs/close-btn.png) no-repeat center center;
		background-size:100% 100%;
	}
	.footer-text{
		position: absolute;
		bottom:40*@unit;
		left:0;
		width:100%;
		color:#fff;
		font-size:12px;
		.text-center;
	}
	.photo-cover-inner{
		width:90%;
		margin:0 5%;
		height:100%;
		.vertical-center;
	}
}
